<template>
  <div class="alert-box">
    <ul class="serch-ul">
      <li @click="showPickerClick(0)">
        <span>{{sortText}}</span>
      </li>
      <li @click="showPickerClick(1)">
        <span>{{pimText}}</span>
      </li>
    </ul>
    <van-popup v-model="showPicker " position="bottom">
      <van-picker
        show-toolbar
        :columns="columns"
        @cancel="showPicker=false"
        @confirm="onConfirm"
        @change="onChange"
      />
    </van-popup>
    <van-popup v-model="showPicker1 " position="bottom">
      <van-picker
        show-toolbar
        :columns="pimData"
        @confirm="onConfirm1"
        @cancel="showPicker1=false"
      />
    </van-popup>
  </div>
</template>

<script type="text/ecmascript-6">
// import priceData from "../../assets/data/priceData.json";
import { getpricecat, getpriceknamecat } from "../../api/price";
export default {
  data() {
    return {
      showPicker: false,
      showPicker1: false,
      columns: [],
      columns1: {},
      columns2: {},
      sortText: "分类",
      sortobj: {},
      sortobj1: {},
      tempData: [],
      pimData: [],
      pimText: "品目",
      pinobj: {},
      pricepartObj: {}
    };
  },
  activated() {
    if (!this.$route.meta.back) {
      this.getListData();
    }
  },
  methods: {
    addArr(a, b) {
      return a.concat(b);
    },
    getListData() {
      let params = this.$route.query;

      //目录结构
      getpricecat(params).then(res => {
        if (res.code == "0000") {
          this.createjg(res.data);
        }
      });
    },

    requestCekName() {
      getpriceknamecat(this.$route.query).then(res => {
        if (res.code == "0000") {
          this.tempData = res.data;
          //判断是否从子频道过来
          // if (this.$route.query.menunameflag !== "all") {
          this.createPim(res.data);
          // }
        }
      });
    },
    //构建分类结构,获取品目结构
    createjg(priceData) {
      for (let index = 0; index < priceData.length; index++) {
        const ele = priceData[index];
        if (!ele.children) {
          ele.children = [{ text: "全部", id: "" }];
        }
      }
      this.columns1 = {
        values: priceData,
        className: "column1"
      };
      this.pricepartObj.channel = this.$route.query.channel;
      //判断是否从子频道过来
      if (this.$route.query.menunameflag !== "all") {
        let array = this.columns1.values;
        let isInclude = false; //子频道传来的name是否可以对上分类，如果对不上采用默认全部
        //①如果子频道名称对上分类名称就传入分类的cid
        for (let index = 0; index < array.length; index++) {
          this.columns2 = {
            values: priceData[index].children,
            className: "column2"
          };
          const element = array[index];
          console.log("element", element.text, this.$route.query.menuname);
          if (element.text === this.$route.query.menuname) {
            this.pricepartObj.cid = element.children[0].id || element.id;
            this.pricepartObj.kname = ``;
            this.columns = [this.columns1, this.columns2];
            this.sortobj = element;
            this.sortobj1 = this.columns2.values[0];
            this.columns1.defaultIndex = index;
            this.columns2.defaultIndex = 0;
            this.sortText = `${this.sortobj.text}>>${this.sortobj1.text}`;
            this.pimText = "品目";
            this.$store.dispatch("acpricepartObj", this.pricepartObj);
            this.$store.dispatch("acpricepartkw", this.sortobj.text);
            isInclude = true;
          }
        }
        //②如果子频道名称没对上分类名称就传入分类的cid
        if (!isInclude) {
          this.columns2 = {
            values: priceData[0].children,
            className: "column2"
          };
          this.columns = [this.columns1, this.columns2];
          this.sortobj = this.columns1.values[0];
          console.log(this.sortobj);
          this.sortobj1 = this.sortobj.children[0];
          this.pricepartObj.cid =
            this.sortobj.children[0].id || this.sortobj.id;
          this.pricepartObj.kname = ``;
          this.sortText = `${this.sortobj.text}>>${this.sortobj1.text}`;
          this.$store.dispatch("acpricepartObj", this.pricepartObj);
          this.$store.dispatch("acpricepartkw", this.sortobj.text);
        }
      } else {
        this.columns2 = {
          values: priceData[0].children,
          className: "column2"
        };
        this.columns = [this.columns1, this.columns2];
        this.sortobj = this.columns1.values[0];
        this.sortobj1 = this.sortobj.children[0];

        this.pricepartObj.cid = this.sortobj.children[0].id || this.sortobj.id;
        this.pricepartObj.kname = ``;
        this.sortText = `${this.sortobj.text}>>${this.sortobj1.text}`;
        this.$store.dispatch("acpricepartObj", this.pricepartObj);
        this.$store.dispatch("acpricepartkw", this.sortobj.text);
      }
      this.requestCekName();
    },
    //构建品目数
    createPim(priceData) {
      this.pimData = [];
      for (let i = 0; i < this.tempData.length; i++) {
        const element = this.tempData[i];
        if (this.sortobj1.id == element.id) {
          this.pimData.push(element);
        }
      }
    },
    //分类弹窗展示
    showPickerClick(i) {
      if (i == 0) {
        this.showPicker = true;
      } else if (i == 1) {
        this.showPicker1 = true;
      }
    },
    //分类数据变化
    onChange(picker, values) {
      picker.setColumnValues(1, values[0].children);
    },
    onConfirm(value) {
      this.sortobj = value[0];
      this.sortobj1 = value[1];
      this.showPicker = false;
      this.sortText = `${this.sortobj.text}>>${this.sortobj1.text}`;
      this.pimText = "品目";
      this.pricepartObj.cid = this.sortobj1.id || this.sortobj.id;
      this.pricepartObj.kname = ``;
      this.$store.dispatch("acpricepartObj", this.pricepartObj);
      this.$store.dispatch("acpricepartkw", this.sortobj.text);
      this.pimData = [];
      for (let index = 0; index < this.tempData.length; index++) {
        const element = this.tempData[index];
        if (this.sortobj1.id == element.id) {
          this.pimData.push(element);
        }
      }
    },
    onConfirm1(value) {
      this.pimobj = value;
      this.showPicker1 = false;
      this.pimText = this.pimobj.text;
      this.pricepartObj.kname = this.pimobj.text;
      this.$store.dispatch("acpricepartObj", this.pricepartObj);
    }
  }
};
</script>
<style scoped lang="less">
.alert-box {
  margin-bottom: 0.3rem;
}
.serch-ul {
  width: 100%;
  height: 0.88rem;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 3px 8px 0 rgba(0, 10, 0, 0.2);
  li {
    width: 49%;
    height: 100%;
    font-size: 0.3rem;
    color: rgba(110, 111, 117, 1);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 0.3rem;
    span {
      position: relative;
      position: relative;
      display: inline-flex;
      height: 100%;
      justify-content: center;
      align-items: center;
      &::after {
        display: block;
        content: "";
        border-width: 0.1rem;
        border-style: solid;
        border-color: #6e6f75 transparent transparent transparent;
        position: absolute;
        top: 0.4rem;
        right: -0.3rem;
      }
    }
  }
}
.module-box {
  width: 100%;
  height: 0.9rem;
  background: #ffffff;
  display: flex;
  .module-boxitem {
    flex: 1;
    option {
      text-align: center;
    }
  }
}
</style>
